<!DOCTYPE html>
<html lang="en">

<head>
  {include file="common/meta" /}

  <style>
    .stateBtn {
      background-color: green;
      color: aliceblue;
      border: none;
      cursor: pointer;
      padding: 5px;
    }

    .active {
      background-color: rgb(238, 104, 104);
    }
  </style>
</head>

<body>
  <div class="x-body">
    <xblock>
      <button class="layui-btn layui-btn-danger" onclick="delAll()">
        <i class="layui-icon"></i>批量删除
      </button>
      <button class="layui-btn" onclick="add()">
        <i class="layui-icon"></i>添加管理员
      </button>

      <span class="x-right" style="line-height:40px">
        共有{$adminCount}位管理员
      </span>
    </xblock>

    <table class="layui-table">
      <thead>
        <tr>
          <th>
            <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i>
            </div>
          </th>
          <th>管理员名称</th>
          <th>管理员昵称</th>
          <th>状态(点击按钮修改)</th>
          <th>操作</th>
      </thead>

      <tbody>
        {foreach $adminList as $item}
        <tr>
          <td>
            {if condition="$item.id == '2'"}
            <div class="layui-unselect" lay-skin="primary">
              <i class="layui-icon">&times;</i>
            </div>
            {else/}
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id="{$item.id}">
              <i class="layui-icon">&#xe605;</i>
            </div>
            {/if}
          </td>
          <td>{$item.username}</td>
          <td>{$item.nickname}</td>
          <td style="text-align: center;">
            {if condition="$item.id != '2'"}
            <button class="stateBtn {$item.state == 0 ? 'active' : ''}" onclick="change(`{$item.id}`)">{$item.statetxt}
            </button>
            {/if}
          </td>
          <td>
            <a title="修改密码" href="{:url('admin/admin/revise',['adminid' => $item.id])}"
              class="layui-btn layui-btn-sm layui-btn-normal">
              修改密码
            </a>
            {if condition="$item.id != '2'"}
            <a title="删除" href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger"
              onclick="delOne(`{$item.id}`)">
              删除
            </a>
            {/if}
          </td>
        </tr>
        {/foreach}
      </tbody>
    </table>

    <div class="page">
      {$pagestr}
    </div>

  </div>
</body>

<script>


  function add() {
    window.location.href = "{:url('admin/admin/add')}"
  }

  // 修改管理员状态
  function change(id, state) {
    var adminId = id;
    layui.use('layer', function () {
      var layer = layui.layer
      var $ = layui.jquery

      layer.confirm('是否确认修改管理员状态', {
        icon: 3,
        title: '提示'
      }, function (index) {
        $.ajax({
          type: 'POST',
          url: `{:url('admin/admin/change')}`,
          data: {
            adminid: adminId,
          },
          success: function (data) {
            console.log(data);
            if (data.result) {
              layer.msg(data.msg, {
                icon: 1,
                time: 2000 // 2秒关闭(如果不配，默认是3秒)
              }, function () {
                // 收藏成功刷新界面
                location.reload();
                return false;
              })
            } else {
              // 删除失败
              layer.msg(data.msg)
            }
          }
        })
      })
    })
  }

  // 单个删除
  function delOne(id) {
    layer.confirm('确认要删除吗？', function (index) {
      layer.close(index);
      del(id);
    })
  }

  // 批量删除
  function delAll() {
    var ids = tableCheck.getData()
    layer.confirm('确认要删除吗？', function (index) {
      //将数组转换为字符串
      var data = ids.join(',');
      del(data)
    })
  }

  // 调用删除方法
  function del(data) {
    // 序列化 将对象转换为参数形式
    var params = {
      ids: data,
    }

    params = $.param(params);

    $.ajax({
      type: "POST",
      url: `{:url('admin/admin/del')}`,
      data: params,
      dataType: "json",
      success: function (data) {
        if (data.result) {
          // 成功
          layer.msg(data.msg, {
            icon: 1,
            time: 2000,
          }, function () {
            // 收藏成功刷新界面
            location.reload();
          })
        } else {
          // 失败
          layer.msg(data.msg);
        }
      }
    })
  }
</script>

</html>